<script lang="ts">
    import { reactive, watchEffect, ref} from 'vue'
    import request from '@/utils/request'
    import { useRoute, useRouter } from 'vue-router'
    import {ElMessage} from 'element-plus'

    export default {
        name: 'goodsadd',
        setup() {
            const router = useRouter()
            // 表单内容
            const form = reactive<{goodsname:string,price:number,category:string,categories:string[],qty:number;}>({
                goodsname: '',
                price:0,
                category:'养生汤',
                categories:[],
                qty:0
            })
            const { params: { id } } = useRoute()
            request.get('/goods/allgoods',{params:{id,}}).then(({ data }:any) => {
                Object.assign(form, data.data[0])
            })
    
            //获取类型选项的值
            const pageCategory = async ()=>{
                const {data} = await request.get('/goods/category')
                if(data.code === 200){
                    form.categories = data.data
                }
            }
            watchEffect(pageCategory)
            
            
            const onSubmit = async ()=>{
                const {goodsname,price,category,qty} = form;
                const {data} = await request.patch('/goods/updata',{
                    id,
                    goodsname,
                    price,
                    category,
                    qty,
                })
                if (data.code === 200) {
                    ElMessage.success('修改成功')
                    router.push('list')
                }
            }
            return {
                form,
                onSubmit,
            }
        }
    }
    </script>
    <template>
        <div>
            <h4 style="margin-left:70px">修改商品</h4>
            <el-form :model="form" label-width="120px"  style="margin-right:100px;margin-left:30px" >
                <el-form-item label="商品名称" prop="goodsname" >
                    <el-input v-model="form.goodsname" />
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="form.price"  />
                </el-form-item>
                <el-form-item label="分类" prop="category">
                    <el-select v-model="form.category" placeholder="选择分类">
                    <el-option :label="item.goodsname" :value="item.goodsname" v-for="item in form.categories" :key="item.id" />
                </el-select>
                </el-form-item>
                <el-form-item label="库存" prop="qty">
                    <el-input v-model="form.qty"  />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
    <style scoped>
       
    </style>